<template>
	<div class="loginPage">
		<div class="xieyi-outer-wrap" style="display: none;" ref="xieyi">
			<xieyi ref="xieyicomp"></xieyi>
		</div>
		<div class="topTitle flex" style="justify-content: initial;">
				<a href="javascript:;" class="return" @click="back"></a>
				<span class="login-tips" style="margin-left: 7.5rem;">用户注册</span>
		</div>
		<div class="cont">
			<ul class="loginForm-ul">
				<li><div class="formfile fix"><i class="icon1"></i> <input type="text" placeholder="用户名" id="register-username" v-model="regForm.username"></div></li>
				<li class="showPswli"><div class="formfile fix"><i class="icon2"></i> <input :type="pwdType" placeholder="密码" id="register-password" v-model="regForm.password"><span class="eyes" @click="showPwd" :class="{'no-eyes':this.pwdType === 'text'}"></span></div></li>
				<li class="showPswli"><div class="formfile fix"><i class="icon2"></i> <input :type="confirmPwdType" placeholder="确认密码" id="register-confirm-password" v-model="regForm.confirmPassword" @keyup.enter="register"><span class="eyes" @click="showConfirmPwd" :class="{'no-eyes':this.confirmPwdType === 'text'}"></span></div></li>
			</ul>
			<div id="captcha"></div>
			<div class="xieyi"><p class="error_msg" v-show="errorMsg" style="top:1.75rem;">{{errorMsg}}</p><input type="checkbox" name="" checked="checked" id="ck" /> 我已阅读并同意<a href="javascript:;" @click="showXieyi" style="margin-left: 5px;">《1234TV网站协议》</a></div>
			<div class="btn"><a href="javascript:;" @click="register">注册</a></div>
			<div class="no-login-wrap fix">
				<div class="fr">已有账号?<router-link to="/login" style="margin-left: 5px;">去登录</router-link></div>
			</div>
			<div class="otherloginBox">
				<div class="otherlogin">
					<span></span>
					<i>其他登录方式</i>
				</div>
				<div class="otherloginDiv">
					<a href="javascript:;" class="login_qq"></a>
					<a href="javascript:;" class="login_weixin"></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {reg} from '@/api/login'
	import xieyi from '@/views/reg/components/xieyi'
	import {stringLen} from '@/utils'
	import {getPath} from '@/utils/auth'
	export default{
		name:'register',
		data(){
			return{
				regForm:{
					username:'',
					password:'',
					confirmPassword:'',
					NECaptchaValidate:''
				},
				pwdType:'password',
				confirmPwdType:'password',
				errorMsg:''
			}
		},
		components:{xieyi},
		creatd(){
			this.captchaIns = null
		},
		methods:{
			showPwd(){
				if(this.pwdType === 'password'){
					this.pwdType = 'text'
				}else{
					this.pwdType = 'password'
				}
			},
			showConfirmPwd(){
				if(this.confirmPwdType === 'password'){
					this.confirmPwdType = 'text'
				}else{
					this.confirmPwdType = 'password'
				}
			},
			back(){
				this.$router.go(-1)
			},
			register(){
				if(this.errorMsg){
					return false
				}
				if(this.regForm.username === '' || this.regForm.password === '' || this.regForm.confirmPassword === ''){
					this.errorMsg = '用户名、密码、确认密码必须填写!'
					return false
				}
				if(this.regForm.NECaptchaValidate === ''){
					this.errorMsg = '请先验证!'
					return false
				}
				if(this.errorMsg === ''){
					this.$store.dispatch('Reg',{username:this.regForm.username,password:this.regForm.password,password_confirmation:this.regForm.confirmPassword,NECaptchaValidate:this.regForm.NECaptchaValidate}).then(()=>{
						let fromPath = getPath()
						this.$router.push(fromPath)
					}).catch(err=>{
						this.captchaIns.refresh()
					})
				}
			},
			showXieyi(){
				this.$layer.open({
					 type: 1
					,content: this.$refs.xieyi.innerHTML
					,className:'custom-layer'
				});
			}
		},
		watch:{
			'regForm.username':function(val){
				if(val.length === 0){
					this.errorMsg = '请输入用户名'
				}else{
					if(!new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_])*$").test(val)){
						this.errorMsg = '用户名须为中文、字母、_ 、数字组合'
					}else if(val.length<4){
						this.errorMsg = '用户名长度过短'
					}else if(stringLen(val)>12){
						this.errorMsg = '用户名长度过长'
					}else{
						this.errorMsg = ''
					}
				}
			},
			'regForm.password':function(val){
				if(val.length === 0){
					this.errorMsg = '请输入密码'
				}else{
					if(val.length<6){
						this.errorMsg = '密码长度至少6位'
					}else if(this.regForm.confirmPassword){
						if(this.regForm.confirmPassword !== val){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
				}
			},
			'regForm.confirmPassword':function(val){
				if(val.length === 0){
					this.errorMsg = '请输入确认密码'
				}else{
					if(val.length<6){
						this.errorMsg = '确认密码长度至少6位'
					}else if(this.regForm.password){
						if(this.regForm.password !== val){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
				}
			}
		},
		mounted(){
			let that = this
			initNECaptcha({
				captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
				element: '#captcha',
				mode: 'float',
				onVerify: (err,res)=>{
					if(!err){
						this.regForm.NECaptchaValidate = res.validate
						if(this.errorMsg === '请先验证!'){
							this.errorMsg = ''
						}
					}
				}
			}, function onload (instance) {
				// 初始化成功后，用户输入对应用户名和密码，以及完成验证后，直接点击登录按钮即可
				that.captchaIns = instance
			}, function onerror (err) {
				// 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
			})
		},
		destroyed(){
		}
	}
</script>

<style lang='scss' scoped>
</style>
